<template>
  <div>
    <div class="questionTypeDiv">
      <a class="hover-red" @click="addSingle()" data-toggle="modal" data-id="0" aria-hidden="true">
        <i class="fa fa-dot-circle-o fa-1x"></i>单选
      </a>
      <a class="hover-red" @click="addMulti()" data-toggle="modal" data-id="0" aria-hidden="true">
        <i class="fa fa-check-square-o fa-1x"></i>多选
      </a>
      <a class="hover-red" @click="addBlanks()" data-toggle="modal" data-id="0" aria-hidden="true">
        <i class="fa fa-file-text-o fa-1x"></i>填空
      </a>
      <a class="hover-red" @click="addMatrix()" data-toggle="modal" data-id="0" aria-hidden="true">
        <i class="fa fa-table fa-1x"></i>矩阵
      </a>
      <a class="hover-red" @click="addScale()" data-toggle="modal" data-id="0" aria-hidden="true">
        <i class="fa fa-table fa-1x"></i>量表
      </a>
      <a class="hover-red" @click="previewQuestionnaire()" data-toggle="modal" data-id="0" aria-hidden="true">
        <i class="fa fa-arrows fa-1x"></i>预览
      </a>
      <a class="hover-red" @click="finish()" data-toggle="modal" data-id="0" aria-hidden="true">
        <i class="fa fa-arrows fa-1x"></i>完成问卷
      </a>
    </div>
    <div id="pop-up-div" v-if="popupShow">
      <PopUp>
        <!--这里传递的是单选-->
        <AddSingle :list="questionList.singleOption" :editingList="editingList.singleOption"></AddSingle>
      </PopUp>
    </div>
    <!--  用来呈现问卷的预览,同时还可以编辑  -->
    <div id="questionnaire-edit" :class="previewIsFull?previewClass[0]:previewClass[1]">
      <!--用来呈现全屏的图标-->
      <div id="full-screen-box">
        <i class="el-icon-full-screen" @click="previewQuestionnaire()"></i>
      </div>
      <h3 class="type" v-show="questionList.singleOption.length > 0">单选</h3>
      <!--单选-->
      <div id="single">
        <div v-for="(item,index) in questionList.singleOption">
          <div class="title-box">
            <h5>
              {{index + 1 + ". "}}
              <input v-if="editingList.singleOption[index]" v-model="item.title"/>
              <label v-else v-text="item.title"></label>
              <span>[单选]</span>
              <span class="del-option" v-show="editingList.singleOption[index]" @click="questionList.singleOption.splice(index,1);checkEditing();">删除</span>
            </h5>
            <h5 class="modify-ques" @click="modifyQues('单选',index)">编辑
            </h5>
          </div>
          <!--选项-->
          <div v-for="(option,index2) in item.options">
            <input type="radio" :name="item.title"/>
            <template>
              <input v-if="editingList.singleOption[index]" v-model="item.options[index2]"/>
              <label v-else v-text="option"></label>
            </template>
          </div>
          <hr />
        </div>
      </div>

      <h3 class="type" v-show="questionList.multiOption.length > 0">多选</h3>
      <!--多选-->
      <div id="multi">
        <div v-for="(item,index) in questionList.multiOption">
          <div class="title-box">
            <h5>
              {{index + 1 + ". "}}
              <input v-if="editingList.multiOption[index]" v-model="item.title"/>
              <label v-else v-text="item.title"></label>
              <span>[多选]</span>
              <span class="del-option" @click="questionList.multiOption.splice(index,1);checkEditing()" v-show="editingList.multiOption[index]">删除</span>
            </h5>
            <h5 class="modify-ques" @click="modifyQues('多选',index)">编辑
            </h5>
          </div>
          <!--选项-->
          <div v-for="(option,index2) in item.options">
            <input type="checkbox" :name="item.title"/>
            <template>
              <template v-if="editingList.multiOption[index]">
                <input v-model="item.options[index2]"/>
                <span class="edit-option">
                  <i class="el-icon-plus" style="float: left" @click="questionList.multiOption[index].options.splice(index2 + 1,0,'问题' + (index2 + 2) )"></i>
                  <i class="el-icon-minus" style="float: right" @click="questionList.multiOption[index].options.splice(index2,1)"></i>
                </span>
              </template>
              <label v-else v-text="option"></label>
            </template>
          </div>
          <hr />
        </div>
      </div>

      <h3 class="type" v-show="questionList.blanks.length > 0">填空</h3>
      <!--填空-->
      <div id="multi">
        <div v-for="(item,index) in questionList.blanks">
          <div class="title-box">
            <h5>
              {{index + 1 + ". "}}
              <input v-if="editingList.blanks[index]" v-model="item.title"/>
              <label v-else v-text="item.title"></label>
              <span>[填空]</span>
              <span class="del-option" @click="questionList.blanks.splice(index,1);checkEditing()" v-show="editingList.blanks[index]">删除</span>
            </h5>
            <h5 class="modify-ques" @click="modifyQues('填空',index)">编辑
            </h5>
          </div>
          <!--答案-->
          <div>
            <u style="border-bottom:solid black 2px">
              <input type="text" placeholder="请输入你的答案" v-model="item.answer" style="width: 100%;color: red;border: none;padding: 10px"/>
            </u>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PopUp from "@/components/popup/PopUp";
import AddSingle from '@/components/questionnaire/AddSingle';
import Success from "@/components/Success";
export default {
  name: "CreateNewQues",
  components: {
    Success,
    AddSingle,
    PopUp
  },
  data() {
    return {
      showSuccess: false,
      popupShow: false,
      previewIsFull: false,
      previewClass: ["questionnaire-edit-full-screen","questionnaire-edit"],
      questionList:{
        //单选
        singleOption:[
          {
            title: "今天吃了几碗饭",
            options: ["1", "2", "3", "4"],
          },
        ],
        multiOption:[
          {
            title: "你喜欢的科目有哪些",
            options: ["英语", "地理", "政治", "物理"],
          },
        ],
        blanks:[
          {
            title: "今天有几节课",
            answer:''
          }
        ],
        matrix:[

        ],
        scale:[

        ],
      },
      //表示的是某一个题是否在编辑状态
      editingList:{
        //单选
        singleOption:[
          false,
        ],
        multiOption:[
          false,
        ],
        blanks: [
          false
        ],
        matrix:[
          false
        ],
        scale:[
          false
        ],
      }
    }
  },
  methods: {
    checkEditing() {
      let quesList = Object.values(this.questionList);
      let editList = Object.values(this.editingList);
      for (let i = 0; i < quesList.length; i++) {
        if(quesList[i].length > editList[i].length) {
          while (quesList[i].length > editList[i].length) {
            editList[i].push(false);
          }
        }else{
          editList[i].length = quesList[i].length;
        }
      }
    },
    addSingle() {
      this.popupShow = true;
      this.$nextTick(()=>{
        let popUp = document.getElementById("pop-up");
        popUp.style.visibility = "visible";
        popUp.style.zIndex = '1';
      });
    },
    addMulti() {
      this.questionList.multiOption.push({
        title: "你喜欢的科目有哪些",
        options: ["英语", "地理", "政治", "物理"],
      });
      this.checkEditing();
    },
    addBlanks() {
      this.questionList.blanks.push(
          {
            title: "今天有几节课",
            answer:''
          }
      );
      this.checkEditing();
    },
    previewQuestionnaire() {
      this.previewIsFull = !this.previewIsFull;
    },
    finish() {
      this.$router.replace({
        name: 'sent',
      });
      setTimeout(()=>{
        this.$router.replace({
          name: 'publishCenter',
        });
      },10000)
    },
    modifyQues(type,index){
      if(type === "单选"){
        this.editingList.singleOption.splice(index,1,!this.editingList.singleOption[index]);
        console.log(type, index, this.editingList.singleOption[index]);
      }
      if(type === "多选"){
        this.editingList.multiOption.splice(index,1,!this.editingList.multiOption[index]);
        console.log(type, index, this.editingList.multiOption[index]);
      }
      if(type === "填空"){
        this.editingList.blanks.splice(index,1,!this.editingList.blanks[index]);
        console.log(type, index, this.editingList.blanks[index]);
      }
    }
  },
  watch: {

  },
  mounted() {
    this.$bus.allQuestion = this.questionList;
  }
}
</script>

<style scoped>
#full-screen-box{
}

#full-screen-box>i{
  font-size: 30px;
  float: right;
}

#full-screen-box>i:hover{
  color:red;
}

.hover-red:hover{
  color:red;
  cursor: pointer;
}

.del-option{
  color:gray;
}

.del-option:hover {
  color: red;
}

.type{
  color: red;
}

.edit-option{
  display: inline-block;
  background-color: yellow;
}

.edit-option>i{
  margin: 0 5px 0 5px;
}

.modify-ques:hover{
  color: red;
}

.title-box{
  background-color: rgb(89, 229, 79);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  height: auto;
}

.questionnaire-edit{
  position: absolute;
  width: 80%;
  height: 80%;
  background-color: #c07a40;
  left: 10%;
  top: 10%;
  overflow: scroll;
}

.questionnaire-edit-full-screen{
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #c07a40;
  overflow: scroll;
  left: 0;
  top: 0;
  z-index: 1;
}



.questionTypeDiv{
  left: 0;
  width: 100%;
  background-color: #f6b6a3;
  position: absolute;
  display: flex;
  justify-content: space-around;
}

.questionTypeDiv>a{
  margin: 0 20px 0 20px;
  padding: 0 20px 0 20px;
  background-color: #f0f9eb;
}
</style>